<template>
	<view class="detail">
		<div class="detail-header" v-for="(item,index) in detailList">
			<div class="header-img">
				<image :src="item.coverImage" mode=""></image>
			</div>
			<div class="header-con">
				<div class="header-title">
					<p>{{item.title}}</p>
				</div>
				<div class="text">
					<div class="header-author">
						<text>{{item.author}}</text>
					</div>
					<div class="header-txt">
						<text>{{category}}</text>
						<text v-if="item.bookStatus==0?true:false">连载中</text>
						<text v-if="item.bookStatus==1?true:false">已完结</text>
					</div>
				</div>
			</div>
			<div class="header-banner">
				<div class="left">
					<div class="banner-img">
						<image src="../../static/vip.png" mode=""></image>
					</div>
					<text>開通VIP，暢享閲讀</text>
				</div>
				<div class="right">
					<image src="../../static/箭头.png" mode=""></image>
				</div>
			</div>
		</div>
		<div class="detail-item" v-for="(item,index) in detailList">
			<div class="item-left">
				<div class="item-title">
					<p>评论值 {{item.commentCount | filiterNum}}</p>
					<text>评论数</text>
				</div>
				<div class="item-img">
					<image src="../../static/hot.png" mode=""></image>
				</div>
			</div>
			<div class="item-right">
				<div class="item-title">
					<p>字节值 {{item.totalCount | filiterNum}}</p>
					<text>字数</text>
				</div>
				<div class="item-img">
					<image src="../../static/爱心.png" mode=""></image>
				</div>
			</div>
		</div>
		<div class="detail-footer">
			<div class="container">
				<div class="detail-introduce">
					<p>简介：</p>
					<div class="intro-con">
						<text v-html="description"></text>
					</div>
					<!-- <div class="btn">
						<div class="intro-btn">
							<text>{{category}}</text>
						</div>
					</div> -->
				</div>
			</div>
			<div class="detail-directory" @click="getJumpContent()" v-for="(item,index) in detailList">
				<div class="directory-title">
					<text>目录</text>
				</div>
				<div class="directory-con">
					<text>第{{catalog}}章 </text>
					<div class="right">
						<text>更新於 {{item.updateTime | formatData}}</text>
						<image src="../../static/Gary.png" mode=""></image>
					</div>
				</div>
			</div>
			<div class="catalog">
				<ul>
					<li v-for="(item,i) in catalogPart">
						<text>{{item.title}}</text>
					</li>
				</ul>
				<div class="cataBtn" @click="getJumpContent()">更多目录 ></div>
			</div>
			<!-- <div class="detail-vip"></div> -->
			<div class="comment" v-for="(item,index) in detailList">
				<div class="comment-title">
					<p>评论 ({{item.commentCount | filiterNum}})</p>
					<div class="right" @click="goWrite()">
						<image src="../../static/comment.png" mode=""></image>
						<text>写评论</text>
					</div>
				</div>
				<div class="comment-list">
					<ul>
						<li v-for="(item,i) in commitList">
							<div class="comment-header">
								<div class="comment-box">
									<div class="comment-logo">
										<image :src="item.avatar" mode=""></image>
									</div>
									<div class="comment-info">
										<div class="comment-username">
											<text>{{item.username}}</text>
										</div>
										<div class="comment-grayStar">
											<div class="star-img" v-for="item in 5">
												<image :src="starImg[1].img" mode=""></image>
											</div>
											<div class="comment-yellowStar">
												<div class="star-img" v-for="(item,i) in item.stars">
													<image :src="starImg[0].img" mode=""></image>
												</div>
											</div>
										</div>
									</div>
								</div>
								<div class="comment-date">
									<text>{{item.posttime}}</text>
								</div>
							</div>
							<div class="comment-detail">
								<text>{{item.text}}</text>
							</div>
							<div class="comment-thumb">
								<div class="thumb-img" @click="addGood(i,item)">
									<image :src="starImg[0].good" mode="" v-if="!item.isShow"></image>
									<image :src="starImg[1].good" mode="" v-else></image>
								</div>
								<text>{{commitList[i].likes}}</text>
							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<div class="detail-fix" v-for="(item,i) in detailList">
			<div class="fix-left" @click="addBookself(item)">
				<image src="../../static/add.png" mode=""></image>
				<text>加入书架</text>
			</div>
			<div class="fix-right" @click="addRead()">
				<image src="../../static/book.png" mode=""></image>
				<text>立即阅读</text>
			</div>
		</div>
	</view>
</template>

<script>
	import {
		getDeatil,
		getCommit
	} from '@/api/index.js';
	export default {
		data() {
			return {
				detailList: [],
				catalog: 0,
				catalogCount: [],
				catalogPart: [],
				commitList: [],
				discussList: [],
				newCommit: [],
				addbookself: [],
				category: '',
				id: '',
				description: '',
				star: 0,
				good: 0,
				timer: null,
				num: 0,
				bookself: {},
				userInfo: {},
				runShow: true,
				starImg: [{
					img: 'https://yuedust.yuedu.126.net/assets/mobile/images/book-detail/star-light.png?13871f2f',
					good: '../../static/赞.png'
				}, {
					img: 'https://yuedust.yuedu.126.net/assets/mobile/images/book-detail/star-dark.png?f04ab3f4',
					good: '../../static/赞-active.png'
				}]
			}
		},
		onLoad(options) {
			uni.showLoading({
				title: '正在加载中...'
			});
			let user = uni.getStorageSync('userInfo')
			this.userInfo = JSON.parse(user);
			let data = JSON.parse(options.data);
			let {
				id,
				category,
				description
			} = data;
			this.id = id
			this.category = category;
			this.description = description
			getDeatil(this.id).then(content => {
				console.log(content);
				let {
					data: {
						book,
						catalog
					}
				} = content;
				this.detailList.push(book)
				this.catalog = catalog.length;
				this.catalogCount = catalog;
				this.catalogPart = catalog.slice(0, 5)
				console.log(this.catalogPart);
				uni.hideLoading()
			}).catch((error => {
				console.log(error);
			}))

			getCommit(this.id).then(content => {
				console.log(content);
				let {
					data: {
						data
					}
				} = content;
				this.commitList = data;
				let that = this;
				for (let k = 0; k < that.commitList.length; k++) {
					that.commitList[k].isShow = false;
				}
				uni.hideLoading()
			}).catch((error => {
				console.log(error);
			}))

			//调用云函数，查询评论
			uniCloud.callFunction({
					name: 'write_part',
					data: {
						book_sourceUuid: this.id
					}
				})
				.then(content => {
					console.log('1.0', content);
					let {
						result: {
							data
						}
					} = content;
					for (let k = 0; k < data.length; k++) {
						this.discussList.push({})
						this.discussList[k].text = data[k].write_description
						this.discussList[k].stars = data[k].write_star
						
						this.discussList[k].posttime = this.formatData(data[k].write_create_time)
						this.discussList[k].likes = data[k].write_like
						this.discussList[k].isShow = data[k].write_isShow;
						this.discussList[k].avatar = this.userInfo.user_avatar;
						this.discussList[k].username = this.userInfo.user_nickName;
						
					}

					if (data.length == 0) {} else {
						this.commitList = this.discussList.concat(this.commitList)
					}

					console.log(this.commitList);
				})
		},
		methods: {
			getJumpContent() {
				let data = {
					id: this.id,
					catalog: this.catalogCount,
					category: this.category,
					description: this.description,
					img: this.detailList[0].coverImage,
					author: this.detailList[0].author,
					title: this.detailList[0].title
				}
				uni.navigateTo({
					url: '../content/content?data=' + encodeURIComponent(JSON.stringify((data)))
				})
			},
			addRead() {
				let data = {
					source_uuid: this.id,
					uuid: this.catalogPart[0].uuid,
					arr: this.catalogCount,
					key: 0,
					category: this.category,
					description: this.description,
					img: this.detailList[0].coverImage,
					author: this.detailList[0].author,
					title: this.detailList[0].title
				}
				
				uni.navigateTo({
					url: '../novel/novel?data=' + encodeURIComponent(JSON.stringify((data)))
				})

			},
			addGood(count, item) {
				for (let k = 0; k < this.commitList.length; k++) {
					if (count == k) {
						if (this.commitList[count].isShow) {
							uni.showToast({
								title: '您已点赞过',
								icon: 'none'
							})
							return
						} else {
							this.commitList[count].likes += 1;
							this.commitList[count].isShow = true;

						}
					}
				}
			},
			goWrite() {
				let data = {
					source_uuid: this.id,
					category: this.category,
					description: this.description,
					img: this.detailList[0].coverImage,
					author: this.detailList[0].author,
					title: this.detailList[0].title,
				}
				uni.navigateTo({
					url: '../write/write?data=' + encodeURIComponent(JSON.stringify((data)))
				})
			},
			formatData(data) {
				var date = new Date(data); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				var Y = date.getFullYear() + '-';
				var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
				var D = date.getDate() + ' ';
				return Y + M + D;
			},
			addBookself(item) {
				let that = this;
				this.bookself.book_sourceUuid = this.id;
				this.bookself.book_category = this.category;
				this.bookself.book_title = item.title
				this.bookself.book_author = item.author;
				this.bookself.book_img = item.coverImage;
				this.bookself.book_description = this.description;
				// console.log(this.bookself);
				//调用云函数，查询书架
				uniCloud.callFunction({
						name: 'list_bookself',
						data: {}
					})
					.then(content => {
						console.log('1.0', content);
						let {
							result: {
								data
							}
						} = content;
						this.addbookself = data;
						if (data.length == 0) {
							//调用云函数，添加书架
							uniCloud.callFunction({
									name: 'addBookself',
									data: {
										...this.bookself
									}
								})
								.then(content => {
									console.log('1.0', content);
									let {
										result
									} = content;
									if (result) {
										uni.showToast({
											title: '加入成功',
											icon: 'success'
										})

									}

								})
						} else {
							let k = data.length
							if (this.id == this.addbookself[k - 1].book_sourceUuid) {
								uni.showToast({
									title: '该书籍已加入',
									icon: 'none'
								})
								return
							} else {
								//调用云函数，添加书架
								uniCloud.callFunction({
										name: 'addBookself',
										data: {
											...this.bookself
										}
									})
									.then(content => {
										console.log('1.0', content);
										let {
											result
										} = content;
										if (result) {
											uni.showToast({
												title: '加入成功',
												icon: 'success'
											})
										}
									})
							}

						}
					})
			}
		},

		filters: {
			formatData(data) {
				const nDate = new Date(data);
				const year = nDate.getFullYear().toString().padStart(2, 0);
				const month = nDate.getMonth().toString().padStart(2, 0);
				const day = nDate.getDay().toString().padStart(2, 0);
				return year + '-' + month + '-' + day
			},
			filiterNum(value) {
				let num;
				if (value > 9999) { //大于9999显示x.xx万
					num = (Math.floor(value / 1000) / 10) + 'w+';
				} else if (value < 9999 && value > -9999) {
					num = value
				} else if (value < -9999) { //小于-9999显示-x.xx万
					num = -(Math.floor(Math.abs(value) / 1000) / 10) + 'w'
				}
				return num;
			}
		}
	}
</script>

<style lang="scss">
	.detail {
		position: relative;
		background-image: url("../../static/background-image.png");
		top: 0px;
		width: 100%;
		height: 100%;
		opacity: 1;
		overflow: hidden;

		.detail-header {
			position: relative;
			display: flex;
			// align-items: center;
			flex-wrap: wrap;
			width: 90%;
			margin: 40rpx auto 0;
			height: 375rpx;
			overflow: hidden;
			opacity: 0.8;
			border-top-left-radius: 12px;
			border-top-right-radius: 12px;
			background: rgba(252, 236, 204, 1);

			.header-img {
				width: 94px;
				height: 125px;
				border-radius: 5px;
				margin: 40rpx 24rpx 0;
				background: url(https://img.js.design/assets/img/62cf90596be41847bae00736.jpg);
				box-shadow: 0px 0px 0px 0px rgba(74, 17, 25, 0.1), 2px 3px 7px 0px rgba(74, 17, 25, 0.1), 8px 10px 13px 0px rgba(74, 17, 25, 0.09), 19px 23px 18px 0px rgba(74, 17, 25, 0.05), 34px 41px 21px 0px rgba(74, 17, 25, 0.01), 53px 64px 23px 0px rgba(74, 17, 25, 0);

				image {
					width: 100%;
					height: 100%;
					border-radius: 20rpx;
					border: 1px solid #fd6143;
				}
			}

			.header-con {
				padding: 10rpx 0;
				box-sizing: border-box;
				margin-top: 40rpx;
				margin-left: 15rpx;
				width: 400rpx;
				height: 125px;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.header-title {
					p {
						font-size: 36rpx;
						font-weight: 700;
						color: rgba(59, 59, 59, 1);
					}
				}

				.text {
					.header-author {
						text {
							font-weight: 600;
							font-size: 13px;
							color: rgba(94, 90, 91, 1);
						}
					}

					.header-txt {
						margin-top: 16rpx;

						text {
							// font-size: 13px;
							// margin-right: 20rpx;
							// font-weight: 600;
							padding: 5rpx 20rpx;
							background-color: #f4831b;
							font-size: 10px;
							margin-right: 20rpx;
							// font-weight: 600;
							border-radius: 25rpx;
							color: #fff;
							text-align: center;
							border: 1px solid #fd6143;
						}

					}
				}
			}

			.header-banner {
				position: absolute;
				display: flex;
				justify-content: space-between;
				bottom: 0px;
				left: 0;
				width: 100%;
				height: 70rpx;
				line-height: 70rpx;
				border-top-left-radius: 18px;
				border-top-right-radius: 18px;
				background-color: #cea577;

				.left {
					display: flex;

					.banner-img {
						width: 32rpx;
						height: 32rpx;
						margin-left: 20rpx;
						margin-top: 4rpx;

						image {
							width: 100%;
							height: 100%;
						}

					}

					text {
						color: #fff;
						font-size: 12px;
						margin-left: 10rpx;
						margin-top: 1rpx;
					}
				}

				.right {
					width: 34rpx;
					height: 34rpx;
					margin: 12rpx 20rpx 0 0;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}

		.detail-item {
			width: 100%;
			height: 130rpx;
			background-color: #fceccc;
			display: flex;
			align-items: center;

			.item-left {
				flex: 45%;
				height: 80%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-right: 1px solid #fd6537;
				margin: 0 40rpx;

				.item-title {
					p {
						font-size: 15px;
						font-weight: 600;
						color: rgba(59, 59, 59, 1);
					}

					text {
						margin-top: 10rpx;
						font-size: 12.5px;
						color: rgba(141, 141, 143, 1)
					}
				}

				.item-img {
					width: 60rpx;
					height: 60rpx;
					margin-right: 44rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

			}

			.item-right {
				flex: 45%;
				height: 80%;
				display: flex;
				align-items: center;
				justify-content: space-between;



				.item-title {
					p {
						font-size: 15px;
						font-weight: 600;
						color: rgba(59, 59, 59, 1);
					}

					text {
						font-size: 12.5px;
						color: rgba(141, 141, 143, 1)
					}
				}

				.item-img {
					width: 60rpx;
					height: 60rpx;
					margin-right: 38rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}

		.detail-footer {
			width: 100%;
			// height: 2000rpx;
			background-color: #fceccc;
			margin-top: 24rpx;
			margin-bottom: 150rpx;

			.container {
				width: 88%;
				margin: 0 auto;

				.detail-introduce {
					width: 100%;
					height: 350rpx;
					overflow: hidden;

					p {
						font-size: 18px;
						margin-top: 20rpx;
						font-weight: 600;
						color: rgba(59, 59, 59, 1);
					}

					.intro-con {
						width: 100%;
						// height: 200rpx;
						// overflow: hidden;
						margin-top: 20rpx;

						text {

							width: 100%;
							font-size: 15px;
							line-height: 1.5;
							color: rgba(59, 59, 59, 1);
							display: -webkit-box;
							-webkit-line-clamp: 3;
							-webkit-box-orient: vertical;
							overflow: hidden;
						}
					}

					.btn {
						display: flex;
						margin-top: 40rpx;
						width: 100%;
						height: 54rpx;

						.intro-btn {

							padding: 8rpx 30rpx;
							background-color: #f4831b;
							font-size: 11px;
							margin-right: 20rpx;
							// font-weight: 600;
							border-radius: 25rpx;
							color: #fff;
							text-align: center;
							border: 1px solid #fd6143;
						}
					}

				}

			}

			.detail-directory {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 40rpx;
				width: 100%;
				height: 80rpx;
				border-top: 1px solid #fd6143;
				border-bottom: 1px solid #fd6143;

				.directory-title {
					margin-left: 40rpx;
					font-weight: 600;
					color: rgba(59, 59, 59, 1);
				}

				.directory-con {
					margin-right: 40rpx;
					font-size: 14px;
					color: rgba(119, 130, 138, 1);
					display: flex;
					justify-content: space-between;

					.right {
						display: flex;
						align-items: center;

						image {
							width: 18rpx;
							margin-left: 20rpx;
							height: 20rpx;
							margin-top: 2rpx;
						}
					}
				}
			}

			.catalog {
				width: 88%;
				margin: 30rpx auto 0;
				height: 200px;
				color: rgba(119, 130, 138, 1);

				ul {
					width: 100%;
					padding: 0;
					margin: 0;
					list-style: none;

					li {
						width: 100%;
						margin-top: 10rpx;
						font-size: 14px;

						&:nth-child(n+2) {
							margin-left: 50rpx;
						}
					}
				}

				.cataBtn {
					width: 100%;
					margin: 50rpx auto 0;
					height: 70rpx;
					background-color: #f5851a;
					color: #fff;
					text-align: center;
					line-height: 70rpx;
					font-size: 13px;
					border-radius: 10px;
				}
			}

			.detail-vip {
				width: 90%;
				margin: 40rpx auto 0;
				height: 143px;
				border-radius: 13px;
				background: url(https://img.js.design/assets/img/62d610dbd6eb2d10a21b53fa.jpg);
			}

			.comment {
				width: 90%;
				// height: 3000rpx;
				margin: 40rpx auto 0;

				.comment-title {
					display: flex;
					align-items: center;
					justify-content: space-between;

					p {
						font-size: 17px;
						color: rgba(59, 59, 59, 1);
						font-weight: 600;
					}


					.right {
						margin-top: 10rpx;
						margin-right: 10rpx;
						display: flex;
						align-items: center;

						text {
							color: rgba(255, 73, 79, 1);
							font-size: 14px;
						}

						image {
							width: 30rpx;
							margin-right: 10rpx;
							height: 30rpx;
						}
					}
				}

				.comment-list {
					margin-top: 10rpx;
					width: 100%;

					ul {
						width: 100%;
						padding: 0;
						list-style: none;

						li {
							width: 100%;
							padding: 50rpx 0;
							box-sizing: border-box;
							border-bottom: 1px solid #fd6143;

							.comment-header {
								width: 100%;
								height: 80rpx;
								display: flex;
								justify-content: space-between;

								.comment-box {
									// width: 100%;
									height: 100%;
									display: flex;
									align-items: center;

									.comment-logo {
										width: 64rpx;
										height: 64rpx;
										border: 1px solid #fd6143;
										padding: 1rpx;
										box-sizing: border-box;
										border-radius: 100%;
										overflow: hidden;
										margin-top: 20rpx;

										image {
											width: 100%;
											height: 100%;
											border-radius: 100%;
										}
									}

									.comment-info {
										// width: 200rpx;
										margin-left: 40rpx;

										.comment-username {
											text {
												// font-size: 15px;
											}
										}

										.comment-grayStar {
											display: flex;
											position: relative;

											.star-img {
												margin-top: 10rpx;
												width: 28rpx;
												height: 28rpx;
												margin-right: 10rpx;

												image {
													width: 100%;
													height: 100%;
												}
											}
										}

										.comment-yellowStar {
											position: absolute;
											top: 0;
											left: 0;
											display: flex;

											.star-img {
												margin-top: 10rpx;
												width: 28rpx;
												height: 28rpx;
												margin-right: 10rpx;

												image {
													width: 100%;
													height: 100%;
												}
											}
										}

									}

								}

								.comment-date {
									font-size: 14px;
									color: #999;
								}
							}

							.comment-detail {
								margin-left: 100rpx;
								margin-top: 30rpx;
								font-size: 15px;
								color: #545454;

								text {
									word-break: break-all;
									overflow: hidden;
									display: -webkit-box;
									-webkit-line-clamp: 4;
									-webkit-box-orient: vertical;

								}
							}

							.comment-thumb {
								display: flex;
								align-items: center;
								margin-left: 600rpx;
								margin-top: 30rpx;

								.thumb-img {

									width: 38rpx;
									height: 38rpx;

									image {
										width: 100%;
										height: 100%;
									}
								}

								text {
									margin-top: 5rpx;
									margin-left: 10rpx;
									font-size: 12px;
									color: #545454;
								}
							}

						}
					}
				}
			}
		}

		.detail-fix {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 120rpx;
			background-color: #f0cead;
			display: flex;
			justify-content: space-evenly;
			align-items: center;

			.fix-left {
				display: flex;
				margin-left: 10rpx;

				image {
					width: 40rpx;
					height: 40rpx;
				}

				text {
					margin-left: 18rpx;
					color: rgba(253, 100, 54, 1);
					font-size: 16px;
				}
			}

			.fix-right {

				display: flex;
				align-items: center;
				width: 180px;
				height: 80rpx;
				justify-content: center;
				line-height: 80rpx;
				border-radius: 25.5px;
				background: linear-gradient(90deg, rgba(247, 136, 23, 1) 0%, rgba(232, 111, 45, 1) 100%);

				image {
					width: 40rpx;
					height: 40rpx;
				}

				text {
					margin-left: 20rpx;
					color: #fff;
					font-size: 14px;
				}
			}
		}
	}
</style>